<script setup lang="ts">
import {computed, ref} from 'vue'
import {getRouterById} from "@/api/router-api.ts";
import {useRoute} from "vue-router";
import type {RouterType} from "@/type/router-type.ts";
import {getSqlById} from "@/api/sql-api.ts";
import type {SqlType} from "@/type/sql-type.ts";
import {getParamGroupById} from "@/api/param-api.ts";
import type {ParamGroupType} from "@/type/paramType.ts";
import MoyuTable from "@/compontents/moyu-table.vue";
import type {TableType} from "@/type/table-type.ts";
import {ElMessage} from "element-plus";
const route = useRoute()
const routerObj = ref<RouterType>({})
const sqlObj = ref<SqlType>({})
const paramGroupObj = ref<ParamGroupType>({moyuSqlParamList: []})
const getInitDataHandler = async () => {
  try{
    const routerRes = await getRouterById(route.params.routerId as string)
    routerObj.value = routerRes.data
    if(routerObj.value.sqlId){
      const sqlRes = await getSqlById(routerObj.value.sqlId)
      sqlObj.value = sqlRes.data
    }
    if(routerObj.value.paramGroupId){
      const paramGroupRes = await getParamGroupById(routerObj.value.paramGroupId)
      paramGroupObj.value = paramGroupRes.data
      if(!paramGroupObj.value.moyuSqlParamList){
        paramGroupObj.value.moyuSqlParamList = []
      }
    }
  } catch (e){
    console.error('接口查询失败', e)
  }
}
getInitDataHandler()

const paramColumn:TableType[] = [
  {label: '参数名称', prop: 'paramName',},
  {label: '默认值', prop: 'paramValue',},
  {label: '描述', prop: 'paramDesc',},
  {label: '是否必填', prop: 'isRequired', type: 'dict', dict: {false: '否', true: '是'}},
  {label: '请求方式', prop: 'paramSite',},
]

const baseUrl = computed(()=>import.meta.env.VITE_BASE_URL || '')
const local = computed(()=>window.location.origin || '')
const apiAddress = computed(()=>{
  return local.value + baseUrl.value + routerObj.value.routerFullPath
})
/**
 * 复制apiAddress到粘贴板中
 */
const copyUrlHandler = ()=>{
  navigator.clipboard.writeText(apiAddress.value).then(() => {
    // 可以添加一个提示，告诉用户复制成功
    ElMessage.success("复制成功")
  }).catch(err => {
    console.error('复制失败', err)
  })
}


</script>

<template>
<div>
  <h1>{{routerObj.routerName}}</h1>
  <el-form>
    <el-form-item label="接口地址">
      <el-button text link @click="copyUrlHandler">{{apiAddress}}</el-button>
    </el-form-item>
    <el-form-item label="请求方式">
      <el-tag>{{routerObj.requestMethod}}</el-tag>
    </el-form-item>
    <el-form-item label="请求参数" label-position="top">
      <moyu-table
          :data="paramGroupObj.moyuSqlParamList"
          :columns="paramColumn"
          :show-option="false"
      >
      </moyu-table>
    </el-form-item>
  </el-form>
</div>
</template>

<style scoped>

</style>
